import React, { useEffect, useRef, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import './index.less';
import { createElastic } from '@/utils/public.ts';
import { WebSocket } from '@/utils/webSocket';
import { setIsConversation, setConversationOffer } from '@/redux/actions';

const WRAP = `id${Math.random()}`;
const SWIPER = `id${Math.random()}`;

export default function Message() {
  const dispatch = useDispatch();
  const redux = useSelector((state: DefaultRedux) => state);
  // 发送消息通话

  const callOneUser = () => {
    WebSocket.socket.emit('conversation', { from: redux.user.username, to: '2233299351@qq.com' });
    dispatch(setIsConversation(true));
    dispatch(setConversationOffer(true));
  };

  useEffect(() => {
    console.log('redux', redux);
    const removeElastic = createElastic({
      wrap: document.getElementById(WRAP),
      swiper: document.getElementById(SWIPER),
      direction: 'y',
      springbackTime: 0.3,
    });
    return () => {
      removeElastic();
    };
  }, []);

  return (
    <div className="Message fx1 fx fx-d fx0" id="Message">
      {/*  */}
      <nav className="title-box fx0 ">
        消息
        <span className="create-chat">创建群聊</span>
      </nav>

      {/*  */}
      <div className="fx fx0 fx-d fx1" id={WRAP} style={{ overflow: 'hidden' }}>
        <div className="" id={SWIPER}>
          <ul className="fx fx0 fx-jc-sa nav-msg">
            <li className="item fx fx-d">
              <div className="img-box">
                <img src="./static/message/a.png" style={{ width: '100%', height: '100%' }} alt="" />
              </div>
              <span className="text">粉丝</span>
            </li>
            <li className="item fx fx-d">
              <div className="img-box">
                <img src="./static/message/a.png" style={{ width: '100%', height: '100%' }} alt="" />
              </div>
              <span className="text">赞</span>
            </li>
            <li className="item fx fx-d">
              <div className="img-box">
                <img src="./static/message/a.png" style={{ width: '100%', height: '100%' }} alt="" />
              </div>
              <span className="text">@我的</span>
            </li>
            <li className="item fx fx-d">
              <div className="img-box">
                <img src="./static/message/a.png" style={{ width: '100%', height: '100%' }} alt="" />
              </div>
              <span className="text">评论</span>
            </li>
          </ul>

          {/* 消息列表 */}
          <ul className="msg-list fx0">
            {Array(50)
              .fill(1)
              .map((item, index) => {
                return (
                  <li className="fx fx-ai-c item" key={index} onClick={callOneUser}>
                    <div className="img-box">
                      <img src="./static/message/a.png" alt="" />
                    </div>
                    <div className="fx fx-d fx-jc-sa fx0" style={{ height: '100%' }}>
                      <p>抖音小助手</p>
                      <p className="msg-tip">发送了一条消息</p>
                    </div>
                  </li>
                );
              })}
          </ul>
        </div>
      </div>
      {/*  */}
    </div>
  );
}
